<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>墨瞳</title>
<link rel="stylesheet" href="css/style.css"/>
<link rel="stylesheet" href="css/styles.css"/>
</head>
<body>
<div id="example-wrapper">
   
    <div id="example-outer">
        <div id="example" data-size="large">

        </div>
    </div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/ttw-clarity-player.js"></script>
<script src="js/yepnope.js"></script>
<script type="text/javascript">
    $(function () {
        var myPlaylist = [
            {
                mp3:'playlist/yangcong.mp3',
                duration:'2:21',
                cover:'playlist/covers/yangcong.jpg',
                title:'洋葱',
                artist:'平安',
                background:'playlist/covers/bg.jpg'
            },
            {
                mp3:'playlist/Sugar.mp3',
                duration:'3:55',
                cover:'playlist/covers/Maroon5.jpg',
                title:'Maroon 5 - Sugar',
                artist:'Maroon 5',
                background:'playlist/covers/bg.jpg'
            },
            {
                mp3:'playlist/yangcong.mp3',
                duration:'3:49',
                cover:'playlist/covers/jay.jpg',
                title:'你听得到 - 无与伦比演唱会',
                artist:'周杰伦',
                background:'playlist/covers/bg.jpg'
            }
        ];
		
        var clarity = $('#example').ttwClarityPlayer(myPlaylist,{
				jPlayer:{
					supplied:'mp3',
					errorAlerts:true,	
					autoPlay:true,				
					warningAlerts:true,
					consoleAlerts:true
				}
			});
        if ((navigator.userAgent.match(/(iPhone|iPod|Android|ios|SymbianOS)/i))) {
            $('#example').attr('data-size', 'mobile');
            clarity.manageLayout();
        }
		$('#example-size-picker').on('click', 'li', function(){
            $('#example').attr('data-size', $(this).data('size'));
            clarity.manageLayout();
        });
    });
</script>

</body>
</html>